.ColumnarSelector {
  display: flex;
  background-color: var(--color-bg-white);
  font-weight: 700;
}

.ColumnarSelector-column {
  min-width: 180px;
  max-height: 340px;
  flex: 1;
}

.ColumnarSelector-rows {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.ColumnarSelector-title {
  color: var(--color-text-medium);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  padding: var(--padding-1);
  padding-left: var(--padding-3);
}

.ColumnarSelector-section:first-child .ColumnarSelector-title {
  padding-top: var(--padding-3);
}

.ColumnarSelector-description {
  margin-top: 0.5em;
  color: var(--color-text-medium);
  max-width: 270px;
}

.ColumnarSelector-row {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: var(--padding-2);
  padding-right: var(--padding-2);
  display: flex;
  align-items: center;
}

.ColumnarSelector-row:not(.ColumnarSelector-row--disabled):hover,
.ColumnarSelector-row:not(.ColumnarSelector-row--disabled):hover .Icon {
  background-color: var(--color-brand) !important;
  color: white !important;
}

.ColumnarSelector-row:not(.ColumnarSelector-row--disabled):hover
  .ColumnarSelector-description {
  color: color(var(--color-text-white) alpha(-50%));
}

.ColumnarSelector-row--selected {
  color: var(--color-brand);
  background: white;
}

.ColumnarSelector-row--disabled {
  color: var(--color-text-medium);
}

.ColumnarSelector-row .Icon-check {
  visibility: hidden;
  padding-right: 0.5rem;
}

.ColumnarSelector-row.ColumnarSelector-row--selected .Icon-check {
  visibility: visible;
}

.ColumnarSelector-column:first-child {
  z-index: 1;
}

/* only apply if there's more than one, aka the last is not the first */
.ColumnarSelector-column:last-child:not(:first-child) {
  background-color: white;
  border-left: var(--border-size) var(--border-style) var(--color-border);
  position: relative;
  left: -1px;
}

.ColumnarSelector-column:last-child .ColumnarSelector-row--selected {
  background: inherit;
  border-top: none;
  border-bottom: none;
  color: var(--color-brand);
}
